<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>hello Vue</title>
</head>
<body>
</body>
<script src="../css/vue.js"></script>
<script>
    //需求数组数据
    let strData = [5, 30, 40, 60, 110, 250, 20, 900, 80];
    /**
     * 第三个函数 filter(过滤器)，filter也是循环遍历数组，根据return：true/false来移除数组的数据，得到一个新数组
     * 使用：filter(callbackfn: (value: T, index: number, array: T[]) => unknown, thisArg?: any): T[];
     * */
        //1.传统写法
    let newStrData1 = [];
    for (let i = 0; i < strData.length; i++) {
        if (strData[i] < 100){
            newStrData1.push(strData[i]);
        }
    }
    console.log("newStrData1:" + newStrData1);

    //2.filter使用
    function fun1(value, index, array){
        console.log("value:" + value + ",index:" + index + ",array:" + array)
        return value < 100;
    }
    let newStrData2 = strData.filter(fun1);
    console.log("newStrData2:" + newStrData2);

    //3.filter写法,直接套入函数
    const newStrData3 = strData.filter((value, index, array) => {
        console.log("value:" + value + ",index:" + index + ",array:" + array)
        return  value < 100;
    });
    console.log("newStrData3:" + newStrData3);

    //4.filter更加简洁的写法(推荐)
    const newStrData4 = strData.filter(value => value<100);
    console.log("newStrData4:" + newStrData4);

    const total = strData.filter(value => value<100).map(value => value *2).reduce((previousValue, currentValue) => previousValue + currentValue);
    console.log(total)
</script>
</html>
